<template>
    <section class="comment">
        <hr>
        <textarea placeholder="120" maxlength="120"></textarea>
        <button class="btn btn-primary" style="width: 100%;padding:1rem 0">发表评论</button>
            <div class="cmt-list">
                <div class="cmt-item" v-for="(val,i) in info">
                    <div class="cmt-title">第{{i}}楼,评论人-->{{val.name}}</div>
                    <div class="cmt-body">
                       {{val.content}}
                    </div>
                </div>
            </div>
        <button class="btn btn-danger" style="width: 100%;padding:1rem 0"
        @click="addInfo"
        >加载更多</button>
    </section>
</template>

<script>
    let data = [
      {
      name:"whx1",
      content:"什么都没说"
      },
      {
      name:"whx1",
      content:"什么都没说"
      },
      {
        name:"whx1",
        content:"什么都没说"
      },
      {
        name:"whx1",
        content:"什么都没说"
      },
      {
        name:"whx1",
        content:"什么都没说"
      },
    ]
  export default {
    data() {
      return {
        info:[]
      }
    },
    methods:{
      getData() {
        this.info = this.info.concat(data)
      },
      addInfo() {
        this.getData()
      }
    },
    created () {
      this.getData()
    }
  }
  /**
   * 单独封装一个comment.vue 子组件
   * 1、先创建一个单独的comment.vue 组见模版
   * 2、在想要使用的coment 组件的页面中,先手动导入comment组件
   *   'import comment from "./comment.vue'
   *
   * */
</script>

<style scoped lang="scss">
    .comment {
        padding: .2rem;
        .cmt-item {
            padding: .4rem;
        }
        .cmt-title {
            background: #8f8f94;
        }
        padding-bottom: 50px;
    }
</style>